<template>
  <div class="search">
    <van-search v-model="value" show-action placeholder="在千万海外商品中搜索" @input="oninput" @search="onSearch"
      @cancel="onCancel" />

    <div class="state1" v-if="state == 1">
      <div class="recent">
        <span class="recent_title">最近搜索</span>
        <img @click="delRecent" class="del" src="../assets/img/search/del.png">
        <div class="tags">
          <van-tag @click="goSearch" v-for="(item, index) in recentWords" :key="index + item" round size="medium"
            color="#f5f5f5" text-color="#333">{{ item }}</van-tag>
        </div>
      </div>

      <div class="find">
        <span class="find_title">搜索查找</span>
        <div class="tags">
          <van-tag @click="goSearch" v-for="(item, index) in hotWords" :key="index + item" round size="medium"
            color="#f5f5f5" text-color="#333">{{ item.name }}</van-tag>
        </div>
      </div>
    </div>
    <div class="state2" v-else-if="state == 2">
      <div @click="goSearch" class="suggest" v-for="(item, index) in suggestWords" :key="index + item">{{ item }}</div>
    </div>
    <div class="state3" v-else-if="state == 3">
      <van-tabs v-model="active">
        <van-tab v-for="(item, index) in resultTags" :key="index + item.name">
          <template #title>
            {{ item.name }}
            <div class="arrow" v-if="item.hasDesc">
              <div @click="arrow = 'up'" :class="{ arrow: arrow == 'up' }" class="up"></div>
              <div @click="arrow = 'down'" :class="{ arrow: arrow == 'down' }" class="down"></div>
            </div>
          </template>
        </van-tab>
      </van-tabs>

      <van-list :immediate-check="false" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-row>
          <router-link :to="{ name: 'detail', params: { id: item.goodsId } }" v-for="(item, index) in resultList"
            :key="index + item.title">
            <van-col span="12">
              <img class="bigimg" :src="item.imgUrl">
              <div class="title">{{ item.title }}</div>
              <div class="price">
                <span>{{ item.showPriceVO.bigPricePrefix }}￥</span>
                <b>{{ item.showPriceVO.bigPrice }}</b>
              </div>
              <div class="info">
                <span class="type" v-show="item.goodsCardInfo.titleNoemaTagUrl">自营</span>
                <span class="active" v-show="item.benefitPointList" v-for="info in item.benefitPointList" :key="info">
                  {{ info }}
                </span>
              </div>
            </van-col>
          </router-link>
        </van-row>
      </van-list>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      state: 1,
      recentWords: JSON.parse(localStorage.getItem("recentWords")) || [],
      hotWords: [],
      suggestWords: [],
      active: 0,
      resultTags: [],
      resultList: [],
      loading: false,
      finished: false,
      tagPageNo: [1, 1, 1, 1],
      arrow: ""
    };
  },
  watch: {
    active(newValue, oldValue) {
      if (newValue != oldValue) {
        this.tagPageNo = [1, 1, 1, 1]
        this.getResult(this.value, this.tagPageNo[this.active], this.resultTags[this.active].sortType, false);
      }

      if (newValue == 2) {
        this.arrow = "up"
      }
      else {
        this.arrow = ""
      }
    }
  },
  created() {
    this.$apiProxy({
      url: '/gw/search/miniapp/hotKey?version=1.0',
      method: 'post',
      data: {
        'param': {
          'duplicatedWords': []
        }
      }
    }).then(res => {
      this.hotWords = res.body.result.keyOutBox;
    }).catch(err => {
      console.log(err);
    })
  },
  methods: {
    getResult(key, pageNo, sortType, concat = false) {
      this.$apiProxy({
        url: '/gw/search/miniapp/goodsList?version=1.0',
        method: 'post',
        data: {
          'param': {
            "key": key,
            "pageNo": pageNo,
            "pageSize": 20,
            "sortType": sortType,
            "desc": 1,
            "filterList": []
          }
        }
      }).then(res => {
        this.tagPageNo[this.active]++;
        this.resultTags = res.body.miniAppSearchResult.sortTypeList;
        if (concat) {
          this.resultList = this.resultList.concat(res.body.miniAppSearchResult.goodsList);
        }
        else {
          this.resultList = res.body.miniAppSearchResult.goodsList;
        }
        this.loading = false;
        if (!res.body.miniAppSearchResult.hasMore) {
          this.finished = true
        }
        if (this.resultList.length >= 100) {
          this.finished = true
        }
      }).catch(err => {
        console.log(err);
      })
    },
    onSearch(val) {
      if (val.length > 0) {
        this.state = 3;
        this.value = val;

        if (!this.recentWords.includes(this.value)) {
          this.recentWords.push(this.value);
          localStorage.setItem("recentWords", JSON.stringify(this.recentWords));
        }

        this.active = 0
        // 跳转到state3并且发起请求
        this.getResult(this.value, this.tagPageNo[this.active], 0, false);
      }
    },
    delRecent() {
      this.recentWords = [];
      localStorage.removeItem("recentWords")
    },
    onCancel() {
      this.state = 1;
      this.$router.go(-1);
    },
    goSearch(e) {
      this.onSearch(e.target.innerText)
    },
    oninput(val) {
      if (val.length > 0) {
        this.state = 2;
        this.$apiProxy({
          url: '/gw/search/miniapp/suggest?version=1.0',
          method: 'post',
          data: {
            'param': {
              'key': val,
              oldQuery: ''
            }
          }
        }).then(res => {
          this.suggestWords = res.body.suggestWords;
        }).catch(err => {
          console.log(err);
        })
      }
    },
    onLoad() {
      this.getResult(this.value, this.tagPageNo[this.active], this.resultTags[this.active].sortType, true);
    }
  },
}
</script>

<style lang="less">
.search {
  color: #999;

  .van-search {
    padding: 8px 0px;

    .van-search__content {
      display: flex;
      width: 315px;
      border-radius: 5px;
      align-items: center;
      flex-grow: 1;
      height: 28px;
      margin: 0 10px;
      position: relative;
      vertical-align: top;
      background-color: #ebebeb;
      padding-left: 6px;

      .van-icon {
        font-weight: bold;
        margin-right: 5px;
      }

      .van-cell__value {
        input::placeholder {
          color: rgb(167, 150, 150);
        }

        .van-icon {
          padding: 0;
          margin: 0;
        }
      }

    }

    .van-search__action {
      border: none;
      display: block;
      height: 17px;
      width: 40px;
      padding: 0px;
      line-height: 17px;
      font-size: 17px;
      color: #999;
      background-color: #fff;
    }
  }

  .state1 {
    font-size: 13px;

    .recent {
      .recent_title {
        height: 13px;
        margin: 15px 0 10px;
        line-height: 13px;
        font-size: 13px;
        text-indent: 12px;
        color: #999;
        display: inline-block;
      }

      .del {
        width: 15px;
        height: 16px;
        float: right;
        margin-right: 20px;
        margin-top: 12px;
      }
    }

    .find {
      .find_title {
        height: 13px;
        margin: 15px 0 10px;
        line-height: 13px;
        font-size: 13px;
        text-indent: 12px;
        display: block;
        color: #999;
      }
    }

    .tags {
      max-height: 130px;
      overflow-y: hidden;
      padding: 0 11px;

      span {
        display: flex;
        flex-direction: row;
        float: left;
        width: auto;
        height: 24px;
        margin: 0 10px 10px 0;
        padding: 0 15px;
        box-sizing: content-box;
        justify-content: center;
        align-items: center;
        border-radius: 50px;
        background-color: #f5f5f5;
        line-height: 24px;
        font-size: 12px;
        color: #333;
      }
    }
  }

  .state2 {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    flex-shrink: 0;
    align-content: flex-start;
    min-width: 0;
    padding: 0px 10px;

    .suggest {
      flex-grow: 1;
      display: flex;
      flex-direction: row;
      height: 12vw;
      flex-grow: 1;
      align-items: center;
      border-bottom: 0.13333vw solid #dcdcdc;
      font-size: 14px;
      text-indent: 1px;
      color: #333;
    }
  }

  .state3 {
    .van-tabs {
      border-top: 1px solid #e5e5e5;
      border-bottom: 1px solid #e5e5e5;
      margin-top: 10px;

      .van-tabs__wrap {
        height: 38px;
        line-height: 36px;

        .van-tab {
          color: rgb(153, 153, 153);
          font-size: 16px;
        }

        .van-tabs__line {
          display: none;
        }

        .van-tab--active {
          color: rgb(227, 20, 54);
        }

        .van-tab__text--ellipsis {
          overflow: inherit;
        }

        .arrow {
          position: relative;
          top: -2px;
          left: 4px;
          width: 6px;
          height: 10px;
          display: inline-block;
          vertical-align: middle;

          .up {
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 0;
            border-color: transparent transparent #999;
            border-style: solid;
            border-width: 0 3px 4px;
          }

          .arrow {
            border-bottom-color: #e31436 !important;
            border-top-color: #e31436 !important;
          }

          .down {
            position: absolute;
            top: 6px;
            left: 0;
            width: 0;
            height: 0;
            border-color: #999 transparent transparent;
            border-style: solid;
            border-width: 4px 3px 0;
          }
        }
      }
    }

    .van-list {
      margin-bottom: 50px;
      margin-top: 5px;

      .van-row {
        .van-col {
          padding: 0px 10px;
          border-bottom: 1px solid #f0f0f0;

          .bigimg {
            width: 172.5px;
            height: 172.5px;
            margin-bottom: 5px;
          }

          .title {
            height: 32px;
            font-size: 12px;
            line-height: 16px;
            margin-top: 5px;
            color: #333;
            overflow: hidden !important;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }

          .price {
            margin-top: 5px;
            display: flex;
            flex-direction: row;
            align-items: baseline;
            justify-content: flex-start;
            font-family: PingFangSC-Medium;
            color: red;
            height: 18px;

            span {
              font-size: 12px;
              line-height: 11px;
            }

            b {
              font-size: 18px;
              line-height: 18px;
            }
          }

          .info {
            height: 16px;
            margin: 4px 0px 10px;
            overflow: hidden;
            display: flex;

            span {
              display: block;
              height: 15px;
              line-height: 15px;
              padding: 0 3px;
              margin: 0px 5px 0 0;
              border: 1px solid #e31436;
              border-radius: 2px;
              font-size: 10px;
              color: #e31436;
              background-color: #fff;
            }

            .active {
              color: #fff;
              background-color: #e31436;
            }
          }
        }
      }
    }
  }
}
</style>